<template>
  <section class="todoapp">
    <!-- 3，头部部分--使用头部子组件标签名 -->
    <TodoListHeader @addList="addList"></TodoListHeader>

    <!-- 3，主体部分--使用主体子组件标签名 ——父传子通过自定义属性传值-->
    <TodoListBody :list="renderList" @changeModify="changeModify" @delList="delList" @changeAll="changeAll"></TodoListBody>


    <!--,3，底部部分--使用底部子组件标签名 -->
    <TodoListFooter :type="type" :countList="countList" :showList="showList" @clearList="clearList" @changeList="changeList"> </TodoListFooter>

  </section>
</template>

<script>
//1，把组件拆分，并且引入到父组件里面
// 1.1引入头部组件
import TodoListHeader  from './components/TodoListHeader'
// 1.2引入主体组件
import TodoListBody from './components/TodoListBody'
// 1.3引入底部部分组件
import TodoListFooter from './components/TodoListFooter'

export default {
  // 2,注册各个子组件
  components: {
    TodoListHeader,
    TodoListBody,
    TodoListFooter,
  },
  // 给父组件的数据进行渲染到页面，data是函数，并且一定要有返回值，通过父传子
  data() {
   return {
     list:[
      {id:1, name:'读万卷书', flag: false},
      {id:2, name:'行万里路', flag: false},
      {id:3, name:'吾日三省吾身', flag: true},
    ],
    type:'all',
   }   
  },
  methods: {
    // 修改功能
   changeModify(id, flag) {
       this.list.forEach(item => {
        if(item.id === id) {
          item.flag = flag
        }
       })
    },
    // 添加功能
    addList(name) {
      this.list = [...this.list, { 
        id:+new Date(), 
        name, 
        flag: false,}]
    },
    // 删除功能
    delList(id) {
       const obj = this.list.find(item => item.id === id)
       if(!obj.flag ) return alert('任务还没有完成，不能删除哦')
      this.list = this.list.filter(item => item.id !== id)
    },
    // 清除已完成功能
    clearList() {
      this.list = this.list.filter(item => !item.flag)

    },
    // 筛选功能
    changeList(value) {
      this.type = value
    },
    // 主体体现筛选
    changeAll(flag) {
      this.list = this.list.filter(item => item.flag = flag)
    }
    
  },

  // 计算属性
  computed: {
    countList(){
      return  this.list.filter(item => !item.flag ).length 
    },
    // 显示和隐藏功能
    showList() {
    return this.list.some(item => item.flag)
    },
    renderList () {
      switch(this.type) {
        case 'all' :
          return this.list
        case 'active' :
          return this.list.filter(item => !item.flag)
        case 'completed':
          return this.list.filter(item => item.flag)
        default : return this.list
      }
    }
  },
}
</script>

<style></style>
